<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Modulo 10</title>
  <meta name="description" content="Practica Modulo 10" />
  
  <script type="text/javascript" src="zepto.min.js"></script>
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="gmaps.js"></script>
  <link rel="stylesheet" type="text/css" href="mypath.css" />
  
  <script type="text/javascript">
    var map, lat, lng, ruta;
    var color = ['red','blue','green'];
	var numColor = 0;
    

    $(function(){

      // Obtenemos la ruta del localStorage.
      function recuperaRuta() { 
        ruta = (localStorage.ruta || "" ); 
        if (ruta!="" ) ruta = JSON.parse( ruta );
      }

   	  // Guarda la ruta, mostramos el dato y guardamos en el localStorage serializando el array de puntos.
      function guardaRuta(lat,lng) { 
        if (ruta==="") ruta=[];
        ruta.push([lat,lng]);
        localStorage.ruta = JSON.stringify(ruta);
      }

   	  // limpia el mapa y empieza desde 0 y geolocalizamos la posicion del usuario.
      function limpiar() { 
        if (confirm("Va a vaciar el mapa")==true) {
          ruta="";
          localStorage.ruta=""
          geolocalizar();
        }
      }

      // Funcion que cambia de color
      function dameColor(){
			numColor=numColor+1;
	 		if (numColor>2){
				numColor=0;
			}
			return color[numColor];

      }

   	  // Obtenemos el nuevo dato del evento y lo pintamos y lo agregamos al localStorage.
      function enlazarMarcador(e){
    	nuevoLat=e.latLng.lat();
    	nuevoLong=e.latLng.lng();
        agregaMarcadorDatos(nuevoLat, nuevoLong);
        guardaRuta(nuevoLat, nuevoLong); 
      };

      // Agrega un marcador al mapa con la longitud y la latitud
      function agregaMarcadorDatos(nLat,nLng){
    	var color = dameColor();
        map.drawRoute({
          origin: [lat, lng],  
          destination: [nLat,nLng],
          travelMode: 'walking',
          strokeColor: color,
          strokeOpacity: 0.6,
          strokeWeight: 5
        });

        lat = nLat;   // guarda coords para marca siguiente
        lng = nLng;

        map.addMarker({ lat: lat, lng: lng});  // pone marcador en mapa
      };      

      // Inicializa la geolocalizacion con la posicion del usuario.
      function geolocalizar(){
        GMaps.geolocate({
          success: function(position){

            recuperaRuta();
            
            if (ruta==="") {
              lat = position.coords.latitude;  // guarda coords en lat y lng
              lng = position.coords.longitude;
              guardaRuta(lat,lng); // guardo en la variable ruta las coordenadas
            } else {
              lat=ruta[0][0];
              lng=ruta[0][1];
            }

            // Mapa asociamos tanto click como toque al evento enlazar.
            map = new GMaps({  
              el: '#map',
              lat: lat,
              lng: lng,
              click: enlazarMarcador,
              tap: enlazarMarcador
            });
            map.addMarker({ lat: lat, lng: lng});  // marcador en [lat, lng]

            // si se han almacenado más marcadores, los agrego al mapa y trazo la ruta
            for(var i=1; i<ruta.length; i++){
              agregaMarcadorDatos(ruta[i][0],ruta[i][1]);
            }  
          },
          error: function(error) { alert('Geolocalización falla: '+error.message); },
          not_supported: function(){ alert("Su navegador no soporta geolocalización"); },
        });
      };

      $("#inicializar").on('click', limpiar ); // evento del botón reiniciar

      geolocalizar(); 
    });
  </script>
</head>
<body>
  <header>
    <h1>Practica modulo 10</h1>
    <nav id="menu"><button type="button" id="inicializar"> Inicializar </button></nav>
  </header>
  <article>
    <div id="map"></div>
  </article>
</body>
</html>